<template>
  <div class="app-content-map" ref="content-map">
    <!-- <div class="task-type">
      <a-select style="width: 220px" @change="SelectType" allowClear v-model="task_type">
          <a-select-option :value="item.typevalue" v-for="(item,index) in $store.state.task_types" :key="index" >{{item.typename}}</a-select-option>
        </a-select>
    </div> -->
    <show_png ></show_png>
    <div id="task3" style="border: 2px solid gray;">
      <a-row style="margin: 5px;">
        <a-space>
          <span class="values">任务:代码7(人工勾绘)</span>
          <a-button  icon="reload" @click="GetActiveTasks">刷新</a-button>
          <a-tooltip placement="bottom" style="margin-left: 5px;">
            <template slot="title"><span>帮助</span></template>
            <a-button type="link" @click="HelpOpen">帮助?</a-button>
          </a-tooltip>
          <span class="values">全部已分配任务:{{amqp_task_num}}</span>
        </a-space>
      </a-row>
      <a-row style="margin: 5px;">
      </a-row>
      <!-- <div class="result-op c-container new-pmd xpath-log"  v-show="tasks.length>0">
            <div class="op-calendar-pc">
              <div class="op-calendar-pc-box" style="height: 272px;">
                <div class="op-calendar-pc-left">
                  <div class="op-calendar-pc-table-box" >
                      <table class="op-calendar-pc-table">
                        <tbody>
                          <tr v-for="(itemTr,indexTr) in HandlData" :key="indexTr">
                            <td v-for="(itemTd,indexTd) in itemTr" :key="indexTd">
                              <div class="op-calendar-pc-relative " @click="nextFeatrue(itemTd.key)">
                                <a href="javascript:void(0);" :class="[doKey==itemTd.key?'op-calendar-pc-table-today':'']">
                                  <span :class="['op-calendar-pc-daynumber',itemTd.properties.status>=0?'checked':'']">{{itemTd.key+1}}</span>
                                  <span :class="['op-calendar-pc-daynumber']" style="font-size: 12px;color: #1e38b9;">{{task_status}}</span>
                                </a>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                  </div>
                </div>
              </div>
            </div>
      </div> -->
      <a-row style="margin: 5px;"  v-show="tasks.length>0">
        <a-space>
          <span style="font-size: 15px;color: #2c3131;" v-show="task_other.check_type==6">以前赋值:{{task_name_pre}}=>当前赋值:{{task_name}}</span>
          <span style="font-size: 15px;color: #2c3131;" v-show="task_other.check_type==5">当前赋值:{{task_name}}</span>
        </a-space>
      </a-row>
      <a-row style="margin: 5px;"  v-show="tasks.length>0">
        <a-space>
          <a-button @click="DoUpload" type="primary" :disabled="GetStauts">提交</a-button>
          <a-statistic  :value="page.countAll" class="demo-class" :suffix="`/${amqp_num}`"> 
            <template #prefix>
              <span style="font-size: 15px;color: #2c3131;">解译进度:</span>
            </template>
          </a-statistic>
        </a-space>
      </a-row>
      <a-row  v-show="tasks.length>0">
        <div class="props">
          <ul>
            <li>
              <span class="values__label">人员</span>
              <span class="values">{{activeFeatrueProps.name}}</span>
            </li>
            <li>
              <span class="values__label">图斑编号</span>
              <span class="values">{{activeFeatrueProps.JVBH?activeFeatrueProps.JVBH:""}}</span>
            </li>
            <li>
              <span class="values__label">前期时相</span>
              <span class="values">{{activeFeatrueProps.QSX?activeFeatrueProps.QSX:""}}</span>
            </li>
            <li>
              <span class="values__label">前期影像</span>
              <a-tooltip placement="bottom" style="margin-left: 5px;">
                <template slot="title"><span>{{activeFeatrueProps.QQJH?activeFeatrueProps.QQJH:""}}</span></template>
                <span class="values">{{activeFeatrueProps.QQJH?activeFeatrueProps.QQJH:""}}</span>
              </a-tooltip>
            </li>
            <li>
              <span class="values__label">后期时相</span>
              <span class="values">{{activeFeatrueProps.HSX?activeFeatrueProps.HSX:""}}</span>
            </li>
            <li>
              <span class="values__label">后期影像</span>
               <a-tooltip placement="bottom" style="margin-left: 5px;">
                <template slot="title"><span>{{activeFeatrueProps.DQJH?activeFeatrueProps.DQJH:""}}</span></template>
                <span class="values">{{activeFeatrueProps.DQJH?activeFeatrueProps.DQJH:""}}</span>
              </a-tooltip>
            </li>
          </ul>
        </div>
      </a-row>
      <a-row v-show="tasks.length==0" class="empty">
        <a-empty description="没有任务"/>
      </a-row>
    </div>
    <a-drawer
      title="操作帮助"
      placement="left"
      :closable="false"
      :visible="help_visible"
      @close="helpClose"
      width="60%"
    >
      <div class="props">
          <ul>
            <li>
              <span class="values__label">1</span>
              <span class="values text">如果没有你需要做的任务则为空</span>
            </li>
            <li>
              <span class="values__label">2</span>
              <span class="values text">判译值:"{{$store.state.task_fuzhis[0].name}}",对应快捷键 空格,请小心确认、提交后且不可修改！</span>
            </li>
            <li>
              <span class="values__label">3</span>
              <span class="values text">判译值："{{$store.state.task_fuzhis[1].name}}",对应快捷键数字{{$store.state.task_fuzhis[1].code}}</span>
            </li>
            <li>
              <span class="values__label">4</span>
              <span class="values text">判译值："{{$store.state.task_fuzhis[2].name}}",对应快捷键数字{{$store.state.task_fuzhis[2].code}}</span>
            </li>
            <li>
              <span class="values__label">5</span>
              <span class="values text">判译值："{{$store.state.task_fuzhis[3].name}}",对应快捷键数字{{$store.state.task_fuzhis[3].code}}</span>
            </li>
            <li>
              <span class="values__label">6</span>
              <span class="values text">判译值："{{$store.state.task_fuzhis[4].name}}",对应快捷键数字{{$store.state.task_fuzhis[4].code}}</span>
            </li>
            <li>
              <span class="values__label">7</span>
              <span class="values text">注意:按Enter键后自动提交、刷新后续任务,请小心确认、提交后且不可修改！</span>
            </li>
          </ul>
        </div>
    </a-drawer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        auto_next:false,
        //
        activeTasks:[],
        activeTask:"",
        activeFeatrueProps:{},
        tasks:[],
        HandlData:[],
        page:{},
        doKey:0,
        tasknum:49,

        help_visible:false,
        task_type: 'bigdata',

        task_other:{
          check_type:7,
        },
        task_status:-1,
        task_name:"",
        task_name_pre:"",
        check_type_array:"7",
        amqp_num:0,
        amqp_task_num:0

      }
    },
    components: {
      show_png: () => import("./show_png.vue"),
    },
    mounted() {
      // this.init_keydown();
      
      setTimeout(()=>{
        this.$mitt.emit("set_map_mod",true)
        this.GetActiveTasks()
      },500)
    },
    computed:{
      GetStauts(){
        if(this.tasks.length>0){
          let finds= this.tasks.filter((_task)=>{
            return _task.properties.status <0
          })
          if(finds.length>0){
            return true 
          }
          else{
            return false
          }
        } 
        else{
          return true
        }
      },
    },
    methods: {
      //当前页面监视键盘输入
      init_keydown(){
        document.onkeydown = (e)=> {        
          let e1 = e || event || window.event || arguments.callee.caller.arguments[0]//事件对象兼容
          if(e1){
            let keyCode=e1.keyCode
            if (keyCode == 37) {//左箭头
              //this.DoPre()
            } else if (keyCode == 38) {//上箭头
              this.setZoom(1)
            } else if (keyCode == 39) {//右箭头
              //this.DoNext()
            } else if (keyCode == 40) {//下箭头
              this.setZoom(-1)
            }else if (keyCode >48 && keyCode <53) {//1 2
              this.SetStatus(keyCode-48)
            }else if (keyCode ==112) { //F1
              if(this.help_visible==true){
                this.helpClose()
              }
              else{
                this.HelpOpen()
              }
            }else if (keyCode ==13) {//enter
              this.DoUpload()
            }
            else if (keyCode == 32) {//空格
              this.SetStatus(0)
            }
            // else if (keyCode ==192) { //`
            //   this.SetStatus(0)
            // }
          }
          e.stopPropagation();
          e.preventDefault();
        }
      },
      GetActiveTasks(){
        this.$mitt.emit("show_tool",true)
        this.task_status=-1
        this.task_name="";
        this.task_name_pre="";
        
        this.task_other={}
        this.activeFeatrueProps={}
        this.$common_apis.axios_get('/checker_get_check_task?',{
          optype: this.task_type,
          check_type: this.check_type_array,
        },true)
        .then(result => {
          if(result){
            let tasks_data=result.data
            this.task_other=result.other
            this.page=result.page
            tasks_data.forEach((_featrue,index)=>{
              _featrue.key=index
              _featrue.other=_featrue.properties.other
              _featrue.other.taskid=_featrue.properties.taskid
            })
            this.tasks=tasks_data
            if(this.tasks.length>0){
              this.nextFeatrue(0);
            }
          }
        });

      },
      SelectType(){
        this.GetActiveTasks()
      },
      nextFeatrue(index=0){
        if(index>this.tasks.length-1){return}
        let Featrue=this.tasks[index]
        this.activeFeatrueProps=Featrue.other
        this.activeFeatrueProps.name=Featrue.properties[this.task_type].name
        this.activeFeatrueProps.taskid=Featrue.properties.taskid



        if(Featrue.properties[this.task_type]){
          this.activeFeatrueProps.name=Featrue.properties[this.task_type].name
          this.activeFeatrueProps.status=Featrue.properties[this.task_type].status
        }
        this.doKey=index
        this.$mitt.emit('set_img_Featrue',Featrue);
        this.$mitt.emit('set_draw_Featrue',Featrue);

        this.CheckType_fuzhi_over(this.task_other.mergeid,this.task_other.check_type); 
        let istatus=Featrue.properties[this.task_type]?.fuzhi?.status
        if(istatus>=1){
          this.task_name_pre=this.$store.state.task_fuzhis[istatus].name
        }
      },
      DoPre(){
        if(this.doKey>0){
          this.nextFeatrue(this.doKey-1);
        }
      },
      setZoom(zoom){
        this.$mitt.emit('set_zoom',zoom);
      },
      SetStatus(status){
        if(this.tasks.length>0 && this.tasks[this.doKey]){
          this.task_status=status
          this.task_name=this.$store.state.task_fuzhis[this.task_status].name
          if(this.auto_next){
            this.DoUpload();
          }
        }
      },
      GetStautsCheck(){
        if(this.task_status>=0){
          return false 
        } 
        else{
          return true
        }
      },
      DoUpload(){
        let _GetStauts=this.GetStautsCheck();
        if(_GetStauts){
          this.$message.info("请解译后再上传")
          return;
        }
        this.$common_apis.axios_post("/checker_fuzhi_update?",{
          mergeid:this.task_other.mergeid,
          id:this.task_other.id,
          status:this.task_status,
          optype: this.task_type,
          check_type: this.task_other.check_type,
        },true).then(res => {
          if (res) {
            this.$message.success(`更新成功`,0.2)
            this.$mitt.emit('clear_map',1);
            this.$mitt.emit('clear_map',2);
            this.GetActiveTasks();
          }
        });
      },
      HelpOpen(){
        this.help_visible=true
      },
      helpClose(){
        this.help_visible=false
      },
      CheckType_fuzhi_over(mergeid,status){
        this.amqp_num=0
        this.amqp_task_num=0
        this.$common_apis.axios_get("/get_check_remain?",{
          mergeid:mergeid,
          check_type:status,
          optype: this.$store.state.task_type
        },true).then(result => {
          this.amqp_num=result.remain
          this.amqp_task_num=result.count
        });
      },
    },
    destroyed(){
      document.onkeydown =undefined
    }
  }
</script>